$('#table').bootstrapTable({
    columns:[
        {
            checkbox: true,
        },
        {
            field:'num',
            title:'序号',   
            align: 'left',
            halign:'left',
            width:41,
        },
        {
            field:'type',
            title:'类别',
            align: 'left',
            halign:'left',
            width:58
        },
        {
            field:'name',
            title:'业务系统名称',
            align: 'left',
            halign:'left',
            width:90,
            //内容超出显示省略号
            cellStyle:function(){
                return {
                    css : {
                        "overflow":"hidden",
                        "text-overflow":"ellipsis",
                        "white-space":"nowrap",
                    }
                }
            },
            //鼠标悬停显示全部
            formatter:function(value) {
                var span=document.createElement('span');
                span.setAttribute('title',value);
                span.innerHTML = value;
                return span.outerHTML;
            }
        },
        {
            field:'phone',
            title:'手机号码',
            align: 'left',
            halign:'left',
            width:78,
            cellStyle:function(){
                return {
                    css : {
                        "font-size":"8px"
                    }
                }
            }
        },
        {
            field:'way',
            title:'通道',
            align: 'left',
            halign:'left',
            width:66,
            //内容超出显示省略号
            cellStyle:function(){
                return {
                    css : {
                        "overflow":"hidden",
                        "text-overflow":"ellipsis",
                        "white-space":"nowrap",
                    }
                }
            },
            //鼠标悬停显示全部
            formatter:function(value) {
                var span=document.createElement('span');
                span.setAttribute('title',value);
                span.innerHTML = value;
                return span.outerHTML;
            }
        },
        {
            field:'content',
            title:'短信内容',
            align: 'left',
            halign:'left',
            width:237,
            //内容超出显示省略号
            cellStyle:function(){
                return {
                    css : {
                        "overflow":"hidden",
                        "text-overflow":"ellipsis",
                        "white-space":"nowrap",
                    }
                }
            },
            //鼠标悬停显示全部
            formatter:function(value) {
                var span=document.createElement('span');
                span.setAttribute('title',value);
                span.innerHTML = value;
                return span.outerHTML;
            }
        },
        {
            field:'open',
            title:'短信状态',
            align: 'left',
            halign:'left',
            width:61,
            cellStyle:cellStyle,
        },
        {
            field:'receive',
            title:'接受时间',
            align: 'left',
            halign:'left',
            width:118,
            cellStyle:function(){
                return {
                    css : {
                        "font-size":"8px"
                    }
                }
            }
        },
        {
            field:'submit',
            title:'提交网关时间',
            align: 'left',
            halign:'left',
            width:118,
            cellStyle:function(){
                return {
                    css : {
                        "font-size":"8px"
                    }
                }
            }
        },
        {
            field:'send',
            title:'发送时间',
            align: 'left',
            halign:'left',
            width:118,
            cellStyle:function(){
                return {
                    css : {
                        "font-size":"8px"
                    }
                }
            }
        },
        {
            field:'use',
            title:'耗时（秒）',
            align: 'left',
            halign:'left',
            width:90
        },
        {
            field:'wait',
            title:'延迟时间（秒）',
            align: 'left',
            halign:'left',
            width:90
        }
    ],
    url:'/bootstrap-table/table.json',                  //json文件路径
    method:'get',                       //请求方式
    cache:false,                        //是否缓存
    toolbar:'#toolbar',                 //工具栏
    search:false,                       //搜索框
    clickToSelect:true,                 //点击行选中
    pagination:true,                    //显示页码
    onlyInfoPagination:false,
    queryParamsType:"",
    paginationPreText:"<",              //上一页文字
    paginationNextText:">",             //下一页文字
    pageNumber:1,                       //初始打开页码
    pageSize: 10,                       //单页记录数
    pageList: [5, 10],                  //分页步进值
    sidePagination:"server",            //分页方式 client前台 server后台
    queryParams : function(params) {	//上传服务器的参数，有筛选项可放入此方法中
        console.log(params);
        return {
            pageNumber : params.pageNumber,	    // 跳转页码
            sortName : params.sortName,         // 排序依据
            sortOrder : params.sortOrder,       // 顺序
            searchText : $('#searchtext').val() // 搜索
        };
    },
    responseHandler: function(res) {
        return {
            "total": res.total,         //总数量
            "rows": res.rows            //数据
        };
    },
    paginationShowPageGo: true, //跳转页码
})
// 状态判断
function cellStyle(value){
    if(value == '成功'){
        return {
            css : {'color':'#5bb050'}
        }
    }else{
        return {
            css : {'color':'red'}
        }
    }
}
$('.searchbtn').click(function () {
    $('#table').bootstrapTable('refresh', { pageNumber: 1 });
});
//下拉框默认与选中
var unSelected = "#a6a6a6";
var selected = "black";
$(function () {
    $("select").css("color", unSelected);
    $("option").css("color", selected);
    $("select").change(function () {
        var selItem = $(this).val();
        if (selItem == $(this).find('option:first').val()) {
            $(this).css("color", unSelected);
        } else {
            $(this).css("color", selected);
        }
    });
})
//菜单栏切换
let title = document.getElementsByClassName('titlebig')
let allul = document.getElementsByClassName('ul')
let allimg = document.getElementsByClassName('tabactive')
function clearwebtab(){
    for(var j = 0; j < allul.length; j++){
        allul[j].setAttribute('class','ul')
        allimg[j].setAttribute('class','tabactive')
        title[j].removeAttribute('i')
    }
}
for(var i = 0; i < title.length; i++){
    title[i].setAttribute('index',i)
    title[i].onclick = function(){
        let index = this.getAttribute('index')
        if(!this.getAttribute('i')){
            clearwebtab()
            allul[index].setAttribute('class','ul tabopen')
            allimg[index].setAttribute('class','tabactive show')
            title[index].setAttribute('i','show')
        }else{
            clearwebtab()
            allul[index].setAttribute('class','ul tabclose')
            allimg[index].setAttribute('class','tabactive')
            title[index].removeAttribute('i')
        }
    }
}
//菜单栏点击创建tab
let allli = document.getElementsByClassName('li')
for(var i = 0; i < allli.length; i++){
    allli[i].setAttribute('index',i)
    allli[i].onclick = function(){
        let index = this.getAttribute('index')
        let titleindex = $(this).parent().prev()[0].getAttribute('index')
        for(var j = 0; j < allli.length; j++){
            allli[j].setAttribute('class','li')
        }
        allli[index].setAttribute('class','li clickli')
        let alltableli = document.getElementsByClassName('tableli')
        let tableli = []
        for(var i = 0; i < alltableli.length; i++){
            tableli.push(alltableli[i].getAttribute('index'))
        }
        if(tableli.indexOf(index) != -1){
            let i = tableli.findIndex(item => {
                return item == index
            })
            clearli()
            alltableli[i].setAttribute('class','tableli tablechecked')
            $(".tablecontent .content").eq(index).show().siblings().hide();
            let twidth = $('#table').css('width')
            $('#toolbar').css('width',twidth)
        }else{
            clearli()
            $('.tableul').append(`<li class='tableli tablechecked' index='${index}' titleindex='${titleindex}'>二级标题<span class='delete'>x</span></li>`)
            $(".tablecontent .content").eq(index).show().siblings().hide();
            let twidth = $('#table').css('width')
            $('#toolbar').css('width',twidth)
        }
    }
}
function clearli(){
    let allli = document.getElementsByClassName('tableli')
    for(var i = 0; i < allli.length; i++){
        allli[i].setAttribute('class','tableli')
    }
}
//tab点击同步
$('.tableul').on('click','.tableli',function(){
    clearli()
    this.setAttribute('class','tableli tablechecked')
    let liindex = this.getAttribute('index')
    let titleindex = this.getAttribute('titleindex')
    for(var j = 0; j < allli.length; j++){
        allli[j].setAttribute('class','li')
    }
    clearwebtab()
    allli[liindex].setAttribute('class','li clickli')
    allul[titleindex].setAttribute('class','ul tabopen')
    allimg[titleindex].setAttribute('class','tabactive show')
    title[titleindex].setAttribute('i','show')
    $(".tablecontent .content").eq(liindex).show().siblings().hide();
    let twidth = $('#table').css('width')
    $('#toolbar').css('width',twidth)
})
//span删除事件
$('.tableul').on('click','.delete',function(e){
    e.stopPropagation()
    if(document.getElementsByClassName('tableli').length == 1){
        $(".tablecontent .first").show().siblings().hide();
    }
    if($(this).parent('li').hasClass('tablechecked')){
        if($(this).parent().prev().length == 0){
            $(this).parent().next().trigger('click')
            $(this).parent().remove()
        }else{
            $(this).parent().prev().trigger('click');
            $(this).parent().remove()
        }
    }else{
        $(this).parent('li').remove()
    }
})
//toolbar自适应宽度
let twidth = $('#table').css('width')
$('#toolbar').css('width',twidth)
$(window).resize(function(){
    let twidth = $('#table').css('width')
    $('#toolbar').css('width',twidth)
})
//tab右击事件
let eindex = null
$('.tableul').on('contextmenu','.tableli',function(e){
    $('#menu').show().css({
        'top': e.pageY + 'px', //获取右键点击坐标
        'left': e.pageX + 'px' //获取右键点击坐标
    });
    eindex = e.currentTarget.getAttribute('index');
    e.preventDefault();
})
$(document).click(function () {
    $('#menu').hide();
})
//关闭其他标签
$('.closeothers').click(function(){
    let alltableli = document.getElementsByClassName('tableli')
    for(var i = 0; i < alltableli.length+1; i++){
        if(alltableli[i].getAttribute('index') == eindex){
            alltableli[i].click()
        }else{
            alltableli[i].remove()
            i = -1
        }
    }
})
//关闭右侧标签
$('.closeright').click(function(){
    let alltableli = document.getElementsByClassName('tableli')
    for(var i = 0; i < alltableli.length; i++){
        if(alltableli[i].getAttribute('index') == eindex){
            alltableli[i].click()
            for(var j = i+1; j < alltableli.length; j++){
                alltableli[j].remove()
                j = i
            }
        }
    }
})